{extend name="public/base" /}
{block name="css"}
<style>
  .left {
    flex: .3;
    padding-top: 10%;
    background: #ffffff;
  }

  .about-content {
    flex: .7;
    background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/about/pc/PCbj.png');
    background-size: cover;
    padding-bottom: 300px;
  }

  .contact-content {
    flex: .7;
    display: none;
    background:#ffffff;
    padding-bottom: 100px;
  }

  .divider {
    width: 1px;
    height: 100%;
    background: #ddd;
  }

  .active {
    border-bottom: 1px #ddd solid;
    padding-bottom: 10px;
  }

  .max-width {
    width: 1100px !important;
    max-width: 1100px !important;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img class="img-fluid" style="width: 100vw" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/banner.png">
  <img class="img-fluid" style="width: 100vw" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/brand.png">

  <div class="d-flex flex-column max-width">
    <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/intention.png" style="margin-top: 75px">
    <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/title3.png" style="margin-top: 75px;width: 48%">
    <div class="row" style="margin-top: 50px">
      <div class="col-4">
        <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/gc1.png">
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/gc2.png">
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/gc3.png">
      </div>
    </div>
  </div>

  <img class="img-fluid" style="margin: 60px auto;width: 100vw" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/P2.png">

  <div class="d-flex flex-column max-width">
    <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/szh.png">
  </div>

  <img class="img-fluid" style="margin: 60px auto 0;width: 100vw" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/about/pc/pp.png">


</section>
{/block}
{block name="js"}
<script>
    $('.navbar-nav').children('li').eq(7).addClass('nav-active');
    $('#about-title').addClass('active');
    $('#about-title').on('click', function () {
        $(this).addClass('active');
        $('.right').css('background-image', 'url(https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/about/pc/PCbj.png)');
        $('.about-content').show();
        $('.contact-content').hide();
        $('#contact-title').removeClass('active');
    });
    $('#contact-title').on('click', function () {
        $(this).addClass('active');
        $('.right').css('background', '#ffffff');
        $('.contact-content').show();
        $('.about-content').hide();
        $('#about-title').removeClass('active');
    });
</script>
{/block}